<template>
	<view>
		<van-cell title="头像" @click="chooseAvatarUrl()" center>
			<view slot="">
				<van-image fit="cover" radius="10px" width="4rem" height="4rem" :src="storeMessage.merchantAvatar"
					use-label-slot />
			</view>
		</van-cell>

		<van-cell-group>
			<van-field label="店铺名" :value="storeMessage.merchantName" placeholder="请输入店铺名字" border="false"
				@change="onChangeName" />
			<van-field label="店铺地址" :value="storeMessage.merchantAddress" placeholder="请输入店铺地址" border="false"
				@change="onChangeAddress" />
				<van-field label="店铺联系电话" :value="storeMessage.merchantPhone" placeholder="请输入负责人手机号" border="false"
					@change="onChangePhone" />
			<van-field label="负责人名字" :value="storeMessage.merchantMan" placeholder="请输入负责人名字" border="false"
				@change="onChangeMan" />
			<van-field label="负责人手机号" :value="storeMessage.merchantManPhone" placeholder="请输入负责人手机号" border="false"
				@change="onChangeManPhone" />
			<van-field label="店铺产品介绍" :value="storeMessage.merchantProducts" placeholder="请输入店铺产品介绍" type="textarea"
				border="false" autosize @change="onChangeProducts" />
				<van-uploader class="selectpic" @delete="deleteImg" :file-list="imagePath" @after-read="ChooseImage"
					multiple />
		</van-cell-group>
		<view class="button" style="" @click="UploadConent()">
			发布
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl:[],
				imagePath: [],
				storeMessage: {
					"merchantAddress": "",
					"merchantAvatar": "",
					"merchantMan": "",
					"merchantManPhone": "",
					"merchantName": "",
					"merchantPhone": "",
					"merchantProducts": "",
					"merchantProductsImg": []
				}
			}
		},
		methods: {
			sendData() {
			
				this.$request('/merchant/add', {
					merchantAddress: this.storeMessage.merchantAddress,
					merchantAvatar: this.storeMessage.merchantAvatar,
					merchantMan: this.storeMessage.merchantMan,
					merchantManPhone: this.storeMessage.merchantManPhone,
					merchantName: this.storeMessage.merchantName,
					merchantPhone: this.storeMessage.merchantPhone,
					merchantProducts: this.storeMessage.merchantProducts,
					merchantProductsImg: this.imageUrl
				}, 'POST').then(res => {
					if (res) {
						//返回帖子页面
						uni.navigateBack({
							url: './myStore',
							success() {
							}
						})
					}
					console.log(res)
			
				}).catch(err => {
					console.log(err)
				})
			},
			getPolicy() {
				return new Promise((resolve, reject) => {
					this.$request('/oss/policy', {
						// file: that.imagePath
					}, 'GET').then(res => {
						resolve(res)
						console.log(res)
			
					}).catch(err => {
						reject(err)
						console.log(err)
					})
				})
			},
			uploadAvatar(){
				var that_ = this
				let ossMessage = this.getPolicy();
				console.log(that_.imagePath.length);
					Promise.all([ossMessage]).then((res) => {
							let time = new Date().getTime()
							uni.showLoading({
								title: '上传中'
							});
							uni.uploadFile({
								url: "https://gulimall-lhc.oss-cn-shanghai.aliyuncs.com",
								filePath: that_.storeMessage.merchantAvatar,
								fileType: 'image',
								name: "file",
								formData: {
									key: res[0].dir + time,
									policy: res[0].policy,
									OSSAccessKeyId: res[0].accessid,
									success_action_statu: '200',
									signature: res[0].signature
								},
								success: ress => {
									let fileUrl = "https://gulimall-lhc.oss-cn-shanghai.aliyuncs.com";
									//存入数组
									console.log(ress)
									if (ress.statusCode == '204') {
										that_.storeMessage.merchantAvatar = fileUrl + '/' + res[0].dir + time
										uni.hideLoading();
											// TODO
											//发起post方式的请求
										this.sendData()
									}
								}
							})
					})

			},
			UploadConent() {
				var that_ = this
				let ossMessage = this.getPolicy();
				console.log(that_.imagePath.length);
			
				if (that_.imagePath.length == 0) {
					this.uploadAvatar()
				} else {
					Promise.all([ossMessage]).then((res) => {
						let len = that_.imagePath.length // 获取图片地址的数量
						let timer = null // 创建变量，用来创建定时器
						for (let i = 0; i < that_.imagePath.length; i++) {
							console.log(res)
							let time = new Date().getTime()
							uni.showLoading({
								title: '上传中'
							});
							uni.uploadFile({
								url: "https://gulimall-lhc.oss-cn-shanghai.aliyuncs.com",
								filePath: that_.imagePath[i].url,
								fileType: 'image',
								name: "file",
								formData: {
									key: res[0].dir + time,
									policy: res[0].policy,
									OSSAccessKeyId: res[0].accessid,
									success_action_statu: '200',
									signature: res[0].signature
								},
								success: ress => {
									let fileUrl = "https://gulimall-lhc.oss-cn-shanghai.aliyuncs.com";
									//存入数组
									console.log(ress)
									if (ress.statusCode == '204') {
										that_.imageUrl.push(fileUrl + '/' + res[0].dir + time)
										uni.hideLoading();
										if (that_.imagePath.length == that_.imageUrl.length) {
											// TODO
											//上传服务器 
											//发起post方式的请求
											this.uploadAvatar()
										}
									}
								}
							})
						}
					})
			
				}
			},
			ChooseImage(event) {
				var that = this
				let imagePath = this.imagePath;
				const {
					file
				} = event.detail;
				console.log(file[0])
				for (let i = 0; i < file.length; i++) {
					if (this.imagePath.length == 3) {
						uni.showToast({
							title: '最多上传三张图片噢',
							icon: 'none',
							duration: 2000
						});
					} else {
						this.imagePath.push(file[i])
					}
				}
			},
			deleteImg(e) {
				var that = this
				let index = e.detail.index
				console.log(index) //输出的就是图片所在fileList的下标，自己根据需要进行操作就行
				this.imagePath.splice(index, 1)
			},
			chooseAvatarUrl() {
				const that = this
				wx.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function(res) {
						// success
						that.storeMessage.merchantAvatar = res.tempFilePaths[0]
					},
					fail: function() {
						// fail
					}
				})
			},

			onChangeName(event) {
				// event.detail 为当前输入的值
				this.storeMessage.merchantName = event.detail;
			},
			onChangeMan(event) {
				// event.detail 为当前输入的值
				this.storeMessage.merchantMan = event.detail;
			},
			onChangePhone(event) {
				// event.detail 为当前输入的值
				this.storeMessage.merchantPhone = event.detail;
			},onChangeManPhone(event) {
				// event.detail 为当前输入的值
				this.storeMessage.merchantManPhone = event.detail;
				},
			onChangeAddress(event) {
				// event.detail 为当前输入的值
				this.storeMessage.merchantAddress = event.detail;
			},
			onChangeProducts(event) {
				// event.detail 为当前输入的值
				this.storeMessage.merchantProducts = event.detail;
			},
		}
	}
</script>

<style>
.button {
		color: #6A6A6A;
		border-radius: 20upx;
		/* text-align:center; */
		line-height: 85rpx;
		/* height:200rpx; */
		text-align: center;
		margin-left: 250upx;
		height: 80upx;
		width: 30%;
		margin-top: 100upx;
		background-color: #f39369;
	}
</style>
